<template>
  <div style="overflow: hidden">
    <div class="title">预警概况</div>

    <el-row>
      <el-col :span="12" v-for="(item, index) in tab" :key="index">
        <div class="etitle">
          <i></i>
          <span>{{ item.title }}</span>
        </div>
        <div class="mouth">
          <span class="name">当月</span>
          <p class="value">{{ item.mouth }}</p>
        </div>
        <div class="day">
          <span class="name">当日</span>
          <p class="value">{{ item.day }}</p>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getOverviewOfEarlyWarning } from "../../utils/api";
export default {
  name: "earlyWarn",
  data() {
    return {
      tab: [
        {
          title: "事件类",
          icon: "event",
          mouth: 0,
          day: 0,
        },
        {
          title: "视频类",
          icon: "video",
          mouth: 0,
          day: 0,
        },
        {
          title: "物联类",
          icon: "wl",
          mouth: 0,
          day: 0,
        },
        {
          title: "其他类",
          icon: "other",
          mouth: 0,
          day: 0,
        },
      ],
    };
  },
  mounted() {
    getOverviewOfEarlyWarning().then((res) => {
      if (res.data.status === 200) {
        this.tab[0].mouth = res.data.data.event.total;
        this.tab[0].day = res.data.data.event.todayAdd;

        this.tab[1].mouth = res.data.data.video.total;
        this.tab[1].day = res.data.data.video.todayAdd;

        this.tab[2].mouth = res.data.data.iot.total;
        this.tab[2].day = res.data.data.iot.todayAdd;

        this.tab[3].mouth = res.data.data.other.total;
        this.tab[3].day = res.data.data.other.todayAdd;
      }
    });
  },
  methods: {},
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.title {
  width: 300px;
  height: 60px;
  background-image: url("../../assets/image/global/title.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  line-height: 60px;
  font-size: 24px;
  font-style: oblique;
  color: #fff;
  padding-left: 40px;
}

el-row {
  width: 100%;
}
.etitle {
  float: left;
  width: 100px;
  height: 40px;
  background-image: url("../../assets/image/right/earlyWarnl.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.etitle i {
  width: 20px;
  height: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  float: left;
  margin: 5px 5px 0px 10px;
}
.etitle span {
  color: #fff;
  font-size: 18px;
}
.el-col-12 {
  margin-bottom: 10px;
}
.el-col-12:nth-child(1) .etitle i {
  background-image: url("../../assets/image/right/event.png");
}
.el-col-12:nth-child(2) .etitle i {
  background-image: url("../../assets/image/right/video.png");
}
.el-col-12:nth-child(3) .etitle i {
  background-image: url("../../assets/image/right/wl.png");
}
.el-col-12:nth-child(4) .etitle i {
  background-image: url("../../assets/image/right/other.png");
}

.mouth,
.day {
  float: left;
  width: 72px;
  height: 40px;
  background-image: url("../../assets/image/right/earlyWarntab.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-left: 5px;
}

.name {
  display: inline-block;
  color: #fff;
  font-size: 16px;
  margin-left: 19px;
  margin-top: -10px;
}
.value {
  color: #fedc85;
  font-size: 16px;
  text-align: center;
  line-height: 15px;
}
</style>
